<template>
    <div class="sidebar">
        <!-- <el-menu :default-active="activePath" background-color="#324157" active-text-color="#20a0ff" text-color="#bfcbd9" unique-opened>    
            <div v-for="item in list" :key="item.id">   
                <div v-if="item.children">
                    <el-submenu :index="`/${item.index}`">
                        <template slot="title">
                            <div style="display:flex;justify-content: space-between;">
                                <div><i :class="item.icon"></i> {{ item.title }}</div>
                            </div>
                        </template>
                        <el-menu-item-group>   
                            <div v-for="subItem in item.children" :key="subItem.id">
                                <el-menu-item :index="`/${item.index}/${subItem.index}`" @click="jumpPage(`/${item.index}/${subItem.index}`)">                                    
                                    <img class="menu_icons" :src="subItem.icon || ''" alt="" />
                                    <span>{{ subItem.title }}</span>
                                </el-menu-item>
                            </div>                            
                        </el-menu-item-group>
                    </el-submenu>
                </div>     
                <div v-else>
                    <el-menu-item :index="`/${item.index}`" @click="jumpPage(`/${item.index}`)">
                        <i :class="item.icon"></i>
                        {{ item.title }}
                    </el-menu-item>
                </div>                
            </div>                    
        </el-menu> -->
        <el-menu
        :default-active="activePath" background-color="#324157" active-text-color="#20a0ff" text-color="#bfcbd9" unique-opened
    >
      <div class="menu-list" v-for="(item, index) in list" :key="item.id">
        <div
          :class="[menuState === index ? 'menu-box' : '']"
          @mouseenter="menuState = index"
          @mouseleave="menuState = 0"
        >
          <el-submenu :index="`/${item.index}`" v-if="item.children">
            <template slot="title">
              <i :class="item.icon"></i>
              <span>{{ item.title }}</span>
            </template>
            <el-menu-item-group>
              <div
                v-for="subItem in item.children"
                :key="subItem.id"
              >
                <el-menu-item
                  v-if="subItem"
                  :index="`/${item.index}/${subItem.index}`"
                   @click="jumpPage(`/${item.index}/${subItem.index}`)"
                >
                  <span>{{ subItem.title }}</span>
                </el-menu-item>
              </div>
            </el-menu-item-group>
          </el-submenu>
          <div v-else>
            <el-menu-item
              :class="{ 'is-active': activePath == item.redirect }"
               :index="`/${item.index}`"
               @click="jumpPage(`/${item.index}`)"
            >
              <i :class="item.icon"></i>
              <span>{{ item.title }}</span>

            </el-menu-item>
          </div>
        </div>
      </div>
    </el-menu>
    </div>
</template>

<script>
import bus from './bus';
import { menuListData } from '../../api/index';
export default {
    data() {
        return {
            // collapse: true,
            list: [],
            menuState: 0,
        };
    },
    created() {
        // 通过 Event Bus 进行组件间通信，来折叠侧边栏   
        // bus.$on('collapse', (msg) => {
        //     this.collapse = msg;
        //     bus.$emit('collapse-content', msg);
        // });
        this.getData();
    },
    computed: {
        activePath() {
            return this.$route.path;
        },
    },  
    methods: {
        getData() {
            menuListData().then((res) => {
                if (res.code == 1) {
                    this.list = res.data.menu_rules;
                    console.log('this.list',this.list)
                    sessionStorage.setItem('menu',JSON.stringify(this.list));
                } else {
                    this.$router.push({path: '/login'});
                }
            });
        },
        jumpPage(path){            
            this.$router.push(path);
        },
    }
};
</script>

<style class="scss" scoped>
.sidebar {
    position: absolute;
    left: 0;
    top: 70px;
    bottom: 0;
    overflow-y: scroll;   
    .el-menu {
        width: 200px;
        height: 100%;
    }
}
.sidebar::-webkit-scrollbar {
    width: 0;
}
.el-menu-item-group__title {
  padding: 0 !important;
}
::v-deep .el-menu-item-group__title {
        display: none;
      }
</style>
